<template>
  <div class="table_continer">
    <div>
      <!-- 列表 ------------------------------------------------------------------------------------------------------->
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column label="序号" width="100">
          <template slot-scope="scope">
            <div>{{ scope.$index + 1 }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="purchaseNum" label="采购编号" min-width="160">
          <template slot-scope="scope">
            <el-link @click="handledetailed(scope.row.purchaseId)" type="primary">{{ scope.row.purchaseNum || '-' }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="采购标题" min-width="160">
          <template slot-scope="{row}">
            {{ row.title || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="applicantName" label="申请人" min-width="120" />
        <el-table-column prop="type" label="采购品类" min-width="120">
          <template slot-scope="scope">
            <div>{{ ['设备采购', '物料采购'][scope.row.type] }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="auditStatus" label="审核结果" min-width="120">
          <template slot-scope="scope">
            <div :style="'color:' + ['#E6A23C', '#67C23A', '#F56C6C'][scope.row.auditStatus]">
              <i :class="['el-icon-warning', 'el-icon-success', 'el-icon-remove'][scope.row.auditStatus]" />
              <span>
                {{ ['审核中', '已通过', '已驳回'][scope.row.auditStatus] }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="我的审核" min-width="120">
          <template slot-scope="scope">
            <div
              :style="'color:' + ['#909399', '#E6A23C', '#67C23A', '#F56C6C'][scope.row.audit && scope.row.audit.status]">
              <i
                :class="['el-icon-info', 'el-icon-warning', 'el-icon-success', 'el-icon-remove'][scope.row.audit && scope.row.audit.status]" />
              <span>
                {{ ['待审核', '审核中', '已通过', '已驳回'][scope.row.audit && scope.row.audit.status] || '-' }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="我的审核意见" show-overflow-tooltip min-width="180">
          <template slot-scope="{row}">
            {{ row.audit && row.audit.view || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="我的审核时间" min-width="180">
          <template slot-scope="{row}">
            {{ row.audit && row.audit.auditTime || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="创建部门" align="center" min-width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.deptName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="创建人" align="center" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.createBy || '-' }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="230">
          <template slot-scope="{row}">
            <!-- 此处ID字段特别注意 ------------------------------------------------------------------------------------>
            <el-button type="primary" v-hasPermi="['purchasing_center_audit']" icon="el-icon-view" size="small"
              @click="handleEdit(row)">审核流程</el-button>
            <!-- 传采购id和审核信息id -->
            <el-button v-hasPermi="['purchasing_left_check']" :disabled="!(row.audit && row.audit.status == 1)"
              type="warning" icon="el-icon-warning-outline" size="small"
              @click="handleAudit(row.purchaseId, row.audit.auditId)">审核
            </el-button>
            <!-- <el-button type="warning" v-hasPermi="['purchasing_left_anew']" icon="el-icon-refresh"
              :disabled="row.auditStatus != 2" size="small" @click="handleAlter(row.purchaseId)">重新申请</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- ------------------------------------------------------------------------------------------------------------>
    </div>
    <!-- --------------------------------分页器---------------------------------------------------------- -->
    <div class="table_continer_pagination">
      <el-pagination :current-page="pageParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
/** 拉取列表远程方法 ---------------------------------------------------------------------------------------------------------- */
import { listAndMe, resubmit } from '@/api/purchasing/purchasing'
import { getuntreatedcount } from '@/api/mianBody/index.js'

/** ------------------------------------------------------------------------------------------------------------------------- */
import { pageCount } from '@/utils/pagination'
/** 查询参数处理 ---------------------------------------------------------------------------------------------------------- */
function processQueryParams (queryParams, pageParams) {
  const params = Object.assign({}, queryParams, pageParams)
  return params
}
/** ------------------------------------------------------------------------------------------------------------------------- */

export default {
  name: 'PaginationTable',
  data () {
    return {
      pagination: {
        total: 1,
        pageCount: 1
      },
      pageParams: {
        pageNum: 1,
        pageSize: 10,
        /** 列表默认排序字段 ---------------------------------------------------------------------------------------------------------- */
        orderByColumn: 'purchaseId',
        /** ------------------------------------------------------------------------------------------------------------------------- */
        isAsc: 'desc'
      },
      queryParams: null,
      tableData: [],
      multipleSelection: []
    }
  },
  mounted () {
    if (!this.$route.query.isCondition) {
      this.refreshList()
    }
  },
  methods: {
    refreshList () {
      let params = processQueryParams(this.queryParams, this.pageParams)
      console.log('查询参数', params);
      params = {
        ...params,
        'audit.status': params.auditStatus
      }
      // --------consolelog('查询参数', params)
      listAndMe(params).then((res) => {
        console.log('获取列表', res);
        // --------consolelog('获取列表', res)
        this.pagination.total = res.total
        this.pagination.pageCount = pageCount(this.pagination.total, this.pageParams.pageSize)
        this.tableData = res.data
        getuntreatedcount().then(res => {
          this.$store.commit('SET_FEATUREMESSAGE', res.data)
        })
      })
    },
    handleQuery (queryParams) {
      this.queryParams = queryParams
      this.refreshList()
    },
    handleSizeChange (value) {
      this.pageParams.pageSize = value
      this.refreshList()
    },
    handleCurrentChange (value) {
      this.pageParams.pageNum = value
      this.refreshList()
    },
    handleSelectionChange (value) {
      // console.log('handleSelectionChange', value)
    },
    // 点击编号跳转采购单详情-----------------------------
    handledetailed (id) {
      this.$emit('click_create_reception', id)
    },
    /** 传递点击【审核流程】事件 ---------------------------------------------------------------------------------------------------------- */
    handleEdit (val) {
      this.$emit('click_edit', val)
    },
    /** 传递点击【审核】事件 ---------------------------------------------------------------------------------------------------------- */
    handleAudit (purchaseId, auditId) {
      this.$emit('click_audit', { purchaseId, auditId })
    },
    handleAlter (purchaseId) {
      this.$emit('click_alter', purchaseId);

      // this.$confirm('此操作将重新申请审核, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   resubmit(purchaseId).then((res) => {
      //     this.$message({
      //       type: 'success',
      //       message: '提交审核成功!'
      //     });
      //     this.refreshList()
      //   })
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消提交审核'
      //   });
      // });
    }
  }
}
</script>
<style lang="scss" scoped>
.table_continer {
  border-radius: 5px;

  &_pagination {
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
  }
}
</style>
